<template>
  <div class="home">

    <el-row :gutter="10">
      <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
        <div class=" bg-purple">
          <img src="../assets/001.png" alt="">
        </div>
      </el-col>
      <el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8">
        <div class=" bg-purple-light">
          <h1>大数据中心</h1>
        </div>
      </el-col>
      <el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="8">
        <div class=" bg-purple">
          <img src="../assets/002.png" alt="">
        </div>
      </el-col>

    </el-row>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="8">
        <div class="grid-content bg-purple left">
          <!-- <img src="../assets/003.png" alt=""> -->
          <div><h2 style="color:blue">总生产产品数量</h2></div>
          <div class="flex">
            <div>5</div>
            <div>8</div>
            <div>7</div>
            <div>6</div>
            <div>5</div>
            <div>5</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="8" :md="8" :lg="12" :xl="8">
        <div class="grid-content bg-purple-light image">

          <div><img src="../assets/rate.png" alt=""><span>今日发货总数:5545</span><span></span></div>
          <div><img src="../assets/rate1.png" alt=""><span>今日生产完成总数:2245</span></div>

          <div><img src="../assets/rate2.png" alt=""><span>今日预计生产:1898</span></div>

        </div>
      </el-col>
      <el-col :xs="12" :sm="8" :md="8" :lg="6" :xl="8">
        <div class="grid-content bg-purple">
          <totalProductionChart></totalProductionChart>
        </div>
      </el-col>

    </el-row>

    <el-row :gutter="10">
      <el-col :xs="24" :sm="8" :md="8" :lg="7" :xl="7">
        <div class="grid-content bg-purple">
          <materialChart></materialChart>
        </div>
      </el-col>
      <el-col :xs="24" :sm="8" :md="8" :lg="10" :xl="10">
        <div class="grid-content bg-purple-light">
          <sellChart></sellChart>

        </div>
      </el-col>
      <el-col :xs="24" :sm="8" :md="8" :lg="7" :xl="7">
        <div class="grid-content bg-purple">
          <finishedChart></finishedChart>
        </div>
      </el-col>

    </el-row>

    <el-row :gutter="10">
      <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
        <div class="grid-content bg-purple">
          <tableOne></tableOne>
        </div>
      </el-col>
      <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
        <div class="grid-content bg-purple-light">
          <baseChart></baseChart>
        </div>
      </el-col>
      <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
        <div class="grid-content bg-purple">
          <tableTow></tableTow>
        </div>
      </el-col>

    </el-row>

  </div>
</template>

<script>
import sellChart from "../components/charts/sellChart.vue";
import totalProductionChart from "../components/charts/totalProductionChart.vue";
import materialChart from "../components/charts/materialChart.vue";
import finishedChart from "../components/charts/finishedChart.vue";
import recentlyChart from "../components/charts/recentlyChart.vue";
import tableOne from '../components/charts/tableOne.vue'
import tableTow from '../components/charts/tableTow.vue'
import baseChart from '../components/charts/baseChart.vue'
export default {
  components: {
    sellChart,
    totalProductionChart,
    materialChart,
    finishedChart,
    recentlyChart,
    tableOne,
    tableTow,
    baseChart
  },
};
</script>
<style lang='scss' scoped>
* {
  color: white;
}
.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  // border: 1px red solid;
}

.bg-purple-light {
  // border: 1px red solid;
  color: white;
  text-align: center;
  margin: 0 auto;
}

.grid-content {
  border-radius: 4px;
  //  height: 450px;
  overflow: hidden;
}

.el-row {
  margin: 20px 0;
}
.home {
  background-image: url("../assets/bg3.png");
  overflow: hidden;
}
.image {
  display: flex;
  justify-content: space-between;
  img {
    width: 100px;
    vertical-align: center;
    
  }span{
    font-size: 25px;
    display: inline-block;
    color: blue;
  }
}
.left {
  background-image: url("../assets/003.png");
  background-repeat: no-repeat;
  background-position: top;
  ul {
  }
  ul li {
    float: left;
    list-style-type: none;
    width: 40px;
  }
}
.flex {
  width: 270px;
  height: 220px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  div {
    line-height: 220px;
    width: 40px;
    height: 25px;
    text-align: center;
    font-size: 25px;
    
  }
}
</style>